<template>
    <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <!-- 收货地址 -->
    <van-contact-card v-if="address"  type="edit" :tel="address.tel" :name="address.name" @click="ToggleAddress"/>
    <van-contact-card v-else type="add" add-text="添加地址" @click="AddressAdd" />


    <!-- 订单备注 -->
    <van-cell-group inset>
        <van-swipe-cell>
            <!-- 商品卡片 -->
            <van-card
                class="goods-card"
                :title="product.name"
                :price="product.price"
                :thumb="product.thumb_text"
            >

            <template #desc>
                    <div style="color: #969799">库存：{{ product.stock }}</div>
            </template>

            <!-- 步进器 -->
            <template #num>
                <van-stepper v-model="nums" :name="product.id" disabled-input
                @change="ProductStep" />
            </template>
            </van-card>
        </van-swipe-cell>
        <van-field
            v-model="remark"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入订单备注"
            show-word-limit        
        />
    </van-cell-group>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="price" button-text="立即下单" @submit="submit" />

</template>

<script setup>
    import {getCurrentInstance} from 'vue'  
    const {proxy}  = getCurrentInstance()

    // 接收要下单的proid
    let proid = proxy.$route.query.hasOwnProperty('proid') ? proxy.$route.query.proid : 0
    proid = ref(proid)
    // console.log(proid);
    // 获取收获地址信息
    let address = proxy.$cookies.get('address') ? proxy.$cookies.get('address') : ''
    address = ref(address)

    // 获取用户信息
    let business = reactive(proxy.$cookies.get('business'))

    let money = ref(0)
    let nums = ref(0)
    let remark = ref('')
    let product = ref({})
    let price = ref(0)

    // 钩子函数
    onBeforeMount(() => {
        AddressData()
        ProductData()
    })


    // 获取收货地址
    let AddressData = async () => {
        // 当收货地址为空时去请求
        if(address.value){
            return false
        }

        // 组装数据
        var data = {
            busid: business.id
        }

        var result = await proxy.$POST({
            url: '/cart/address',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }

        address.value = {
            tel: `${result.data.mobile}(${result.data.consignee})`,
            name:`${result.data.region_text} ${result.data.address}`,
            id: result.data.id
        }
    }

    // 添加收货地址
    let AddressAdd = () => {
        proxy.$router.push('/address/add')
        return false
    }

    // 切换收货地址
    let ToggleAddress = () => {
        proxy.$router.push({
            path:'/address/index',
            query:{action:'toggle'}
        })
    }

    // 请求商品信息
    let ProductData = async () => {
        var result = await proxy.$POST({
            url: '/cart/product',
            params: {proid: proid.value}
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }else{
            product.value = result.data
            money.value = result.data.price
            price.value = parseFloat(money.value * 100)
            console.log(money.value);
        }
    }

    // 步进器修改数量
    let ProductStep = async (value,detail) => {
        // 组装数据
        var data = {
            busid: business.id,
            proid: detail.name,
            nums: value
        }

        // console.log(nums.value);
        price.value = parseFloat(nums.value * money.value * 100)
        // console.log(price);
        
    }


    // 提交订单 -> 结算界面
    let submit = async () => 
    {
        proxy.$confirm({
            title: '下单提醒',
            message: '是否确认立即下单'
        }).then(async () => {
            var data = {
                busid: business.id,
                proid: proid.value,
                addrid: address.value.id,
                nums: nums.value,
                remark: remark.value
            }

            var result = await proxy.$POST({
                url: '/cart/buynow',
                params: data
            })

            if(result.code == 0){
                proxy.$fail(result.msg)
                return false
            }else{
                proxy.$success(result.msg)
                proxy.$router.push(result.url)
                return false
            }

        }).catch(err => {})
    }

    const back = () => {
        proxy.$router.go(-1)
        return false
    }
</script>

<style>
    .cart-confirm {
      display: block;
      width: 100%;
      background: var(--van-card-background);
    }
</style>